import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'
import global from '../../global';
import { Textarea, Button, Map, Swiper, SwiperItem, Picker, Input, Image } from '@tarojs/components'
import Request from "../../api";
import Event from "../../event";
export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      form: {},
      carnum: [],
      showNewPower: false,
      // 省份简写
      provinces: [
        ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
        ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
        ['桂', '琼', '渝', '川', '贵', '云', '藏'],
        ['陕', '甘', '青', '宁', '新'],
      ],
      // 车牌输入
      numbers: [
        ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
        ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
        ["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"],
        ["W", "X", "Y", "Z", "港", "澳", "学"]
      ],
      KeyboardState: true,
      loading: false

    };
    this.bindChoose = this.bindChoose.bind(this)
  }

  componentWillMount () {
    console.log(global.userInfo)

  }

  componentWillUnmount () { }

  componentDidHide () { }

  bindChoose(val) {
    if (!this.state.carnum[6] || this.state.showNewPower) {
      let arr = [];
      arr[0] = val;
      this.state.carnum = this.state.carnum.concat(arr)
      this.setState({
        carnum: this.state.carnum
      })
    }
  }

  bindDelChoose() {
    if (this.state.carnum.length != 0) {
      this.state.carnum.splice(this.state.carnum.length - 1, 1);
      this.setState({
        carnum: this.state.carnum
      })
    }
  }

  showPowerBtn() {
    this.setState({
      showNewPower: true,
      KeyboardState: false
    })
  }

  closeKeyboard() {
    this.setState({
      KeyboardState: true
    })
  }

  openKeyboard() {
    this.setState({
      KeyboardState: false
    })
  }

  async submitForm() {
    if (this.state.loading) {
      return;
    }
    this.state.loading = true;
    this.setState({
      loading: true
    });
    let {userId} = global.userInfo;
    let {villageId, villageName} = global.currentBindingVillage;
    let {brand, model} = this.state.form;
    if (!brand || !model || this.state.carnum.length < 7) {
      await Taro.showToast({
        title: '请完善相关信息'
      })
    }
    try {
      const res = await Request.post('/business/wx_car', {brand, model, number: this.state.carnum.join(''), status: 1, villageId: villageId, villageName: villageName, userId});
      if (res.data.code !== 200) {
        throw new Error();
      }
      await Taro.navigateBack();
      await Taro.showToast({
        type: 'success',
        title: '提交成功'
      })
      Event.emit('updateCars');
    } catch (e) {
      await Taro.showToast({
        title: '提交失败请重试'
      })
    } finally {
      this.setState({
        loading: false
      })
    }


  }

  render () {
    let {form, carnum, showNewPower, provinces, numbers, KeyboardState, loading} = this.state;
    return (
      <View className='cars_detail'>
        <View className='info_container'>
          <View className='input_item'>
            <Text className='required'>品牌</Text>
            <Input value={form.brand} onInput={(e) => {this.setState({form: {...form, brand: e.detail.value}})}} type='text' placeholder='请输入品牌'/>
          </View>
          <View className='input_item'>
            <Text className='required'>车型</Text>
            <Input value={form.model} onInput={(e) => {this.setState({form: {...form, model: e.detail.value}})}} type='text' placeholder='请输入车型'/>
          </View>
          <View className='car_number_item'>
            <Text className='required'>车牌号码</Text>
            <View className='car_number_input_container'>
              <View className="carNumber-items">
                <View className="carNumber-items-box" onClick={this.openKeyboard.bind(this)}>
                  <View className="carNumber-items-province carNumber-items-box-list">{carnum[0]}</View>
                  <View className="carNumber-items-En carNumber-items-box-list">{carnum[1]}</View>
                </View>

                <View className="carNumber-item" onClick={this.openKeyboard.bind(this)}>{carnum[2] || ''}</View>
                <View className="carNumber-item" onClick={this.openKeyboard.bind(this)}>{carnum[3] || ''}</View>
                <View className="carNumber-item" onClick={this.openKeyboard.bind(this)}>{carnum[4] || ''}</View>
                <View className="carNumber-item" onClick={this.openKeyboard.bind(this)}>{carnum[5] || ''}</View>
                <View className="carNumber-item" onClick={this.openKeyboard.bind(this)}>{carnum[6] || ''}</View>

                {
                !showNewPower ?
                <View className='carNumber-item carNumber-item-newpower' onClick={this.showPowerBtn.bind(this)}>新</View>
                  :
                <View className={'carNumber-item'} onClick={this.openKeyboard.bind(this)}>{carnum[7]}</View>
                }
              </View>
            </View>
          </View>
          <Button loading={loading} className='submit_btn' type='primary' onClick={this.submitForm.bind(this)}>提交</Button>
        </View>

        <View className="keyboard" style={{display: !KeyboardState ? 'block' : 'none'}}>
          <View className="keyboardClose">
            <View className="keyboardClose_btn" onClick={this.closeKeyboard.bind(this)}>关闭</View>
          </View>

          <View className="keyboard-item" style={{display: !carnum[0] ? 'block' : 'none'}}>
            {
              provinces.map(item => {
                return (
                  <View className="keyboard-line">
                    {
                      item.map(subItem => {
                        return <View className="keyboard-btn" onClick={() => {this.bindChoose(subItem)}}>{subItem}</View>
                      })
                    }
                  </View>
                )
              })
            }

            <View className="keyboard-del" onClick={this.bindDelChoose.bind(this)}>
              <text className="font_family icon-shanchu keyboard-del-font"></text>
            </View>
          </View>

          <View className="keyboard-item iscarnumber" style={{display: carnum[0] ? 'block' : 'none'}}>
            {
              numbers.map(item => {
                return (
                  <View className="keyboard-line">
                    {
                      item.map(subItem => {
                        return <View className="keyboard-btn" onClick={() => {this.bindChoose(subItem)}}>{subItem}</View>
                      })
                    }
                  </View>
                )
              })
            }
            <View className="keyboard-del" onClick={this.bindDelChoose.bind(this)}>
              <text className="font_family icon-shanchu keyboard-del-font"></text>
            </View>
          </View>
        </View>
      </View>
    )
  }
}
